<template>
  <div style="background-color: #FFFFFF;padding: 15px">
    <span style="font-size: 19px;font-weight: 600">个人设置</span><br>
  </div>

  <div class="settingContent">
    <a-row>
      <a-col :span="4">
        <div style="height: 100%;">
          <a-menu
              v-model:selectedKeys="selectedKeys"
              style="text-align: center;width: 90%;height: 100%;"
              mode="vertical"
          >
            <a-menu-item key="1">
              基本设置
            </a-menu-item>
            <a-menu-item key="2">
              安全设置
            </a-menu-item>
          </a-menu>
        </div>
      </a-col>
      <a-col :span="20">
        <div v-if="selectedKeys == 1" style="width: 100%;">
          <a-breadcrumb>
            <a-breadcrumb-item>个人设置</a-breadcrumb-item>
            <a-breadcrumb-item><a href="#">基本设置</a></a-breadcrumb-item>
          </a-breadcrumb>

          <a-divider style="margin-top: 10px"/>
          <div style="margin-left: 20px;margin-top: 10px">
            <div class="formContent">
              <div >
                <form>
                  <input class="input_image left" id="file" type="file" @change="change"  formenctype="multipart/form-data" multiple/>
                  <img class="show_input_image left" :src="userAvatar" />
                </form>

<!--                <a-upload-->
<!--                    class="avatar-uploader"-->
<!--                    v-model:file-list="fileList"-->
<!--                    :custom-request="updateAvatar"-->
<!--                    :data="uploadParams"-->
<!--                    accept="image/*"-->
<!--                    list-type="picture-card"-->
<!--                    :show-upload-list="false"-->
<!--                    :before-upload="beforeUpload"-->
<!--                    name="avatar"-->
<!--                >-->
<!--                  <img v-if="userAvatar" :src="userAvatar" style="width: 100%;height: 100%;" alt="avatar" />-->
<!--                  <div v-else>-->
<!--                    <loading-outlined v-if="loading"></loading-outlined>-->
<!--                    <plus-outlined v-else></plus-outlined>-->
<!--                    <div class="ant-upload-text">Upload</div>-->
<!--                  </div>-->
<!--                </a-upload>-->
             </div>
            </div>

            <div class="formContent" style="margin-top: 15px">
              <span class="formItem">用户昵称： </span>
              <a-input  style="width: 200px" v-model:value="userAccount" v-if="isAccount == true"/>
              <span style="line-height: 40px;">{{isAccount == true? '' : userAccount}}</span>&nbsp;&nbsp;
              &nbsp;&nbsp;
              <a v-if="isAccount == false" @click="isAccount = true">编辑</a>
              <a v-if="isAccount == true" @click="updateAccount">保存</a>
            </div>

            <div class="formContent">
              <span class="formItem">用户姓名： </span>
              <a-input v-if="isName == true" autofocus style="width: 200px;" v-model:value="userName"/>
              <span style="line-height: 40px;">{{isName == true? '' : userName}}</span>&nbsp;&nbsp;
              <a  v-if="isName == false" @click="isName = true">编辑</a>
              <a  v-if="isName == true" @click="updateName">保存</a>
            </div>

            <div class="formContent">
              <span class="formItem">用户性别： </span>
              <span style="line-height: 40px;" v-if="isGender == false">{{gender == 1 ? '男' : '女'}}</span>
              <a-radio-group v-if="isGender == true" v-model:value="gender" style="margin-top: 5px">
                <a-radio :value="1">男</a-radio>
                <a-radio :value="0">女</a-radio>
              </a-radio-group>
              &nbsp;&nbsp;
              <a v-if="isGender == false" @click="isGender = true">编辑</a>
              <a v-if="isGender == true" @click="updateGender">保存</a>
            </div>

            <div class="formContent">
              <span class="formItem">手机号码： </span>
              <a-input v-if="isPhone == true" autofocus style="width: 200px;" v-model:value="userPhone"/>
              <span style="line-height: 40px;">{{isPhone == true? '' : userPhone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
                }}</span>&nbsp;&nbsp;
              <a  v-if="isPhone == false" @click="isPhone = true">编辑</a>
              <a  v-if="isPhone == true" @click="updatePhone">保存</a>
            </div><br>
          </div>
        </div>
        <div v-if="selectedKeys == 2" style="width: 100%">
          <a-breadcrumb>
            <a-breadcrumb-item>个人设置</a-breadcrumb-item>
            <a-breadcrumb-item><a href="#">安全设置</a></a-breadcrumb-item>
          </a-breadcrumb>
          <a-divider style="margin-top: 10px"/>
          <div style="margin: 50px auto;width: 40%;padding-right: 50px">
            <a-form
                :model="formStatePwd"
                name="basic"
                :label-col="{ span: 7 }"
                :wrapper-col="{ span: 16 }"
                autocomplete="off"
                @finish="updatePwd"
            >
              <a-form-item
                  label="输入新密码"
                  name="firstPwd"
              >
                <a-input-password v-model:value="formStatePwd.newPwd" />
              </a-form-item>

              <a-form-item
                  label="确认新密码"
                  name="firstPwd"
              >
                <a-input-password v-model:value="formStatePwd.affirmPwd" />
              </a-form-item>

              <a-form-item :wrapper-col="{ offset: 7, span: 16 }">
                <a-button :disabled="formStatePwd.affirmPwd === '' || formStatePwd.newPwd === '' || formStatePwd.affirmPwd === ''"
                          type="primary" html-type="submit">确认</a-button>
              </a-form-item>
            </a-form>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {reactive, toRefs} from "vue";
import {getLogin, updateAva, updateUserInfo} from "@/utils/user";
import {useStore} from "vuex";
import {message} from "ant-design-vue";
import axios from "axios";

// function getBase64(img, callback) {
//   const reader = new FileReader();
//   reader.addEventListener('load', () => callback(reader.result));
//   reader.readAsDataURL(img);
// }

export default {
  setup(){
    const state = reactive({
      userName: '',
      isName: false,
      userAccount: '',
      isAccount: false,
      userId: '',
      gender: 1,
      isGender: false,
      userPhone: '',
      isPhone: false,
      userAvatar: '',
      selectedKeys: ['1'],
      fileList: [],
      loading: false,
      formStatePwd: {
        newPwd: '',
        affirmPwd: '',
      }
    })

    const store = useStore()
    state.userName = store.state.userName
    state.userAccount = store.state.userAccount
    state.userAvatar = store.state.userAvatar
    state.userId = store.state.id
    state.userPhone = store.state.phone

    //更新用户
    function updateUser(data){
      updateUserInfo(data).then(res => {
        if (res.data.code === 0){
          // console.log(res)
          message.success('修改成功')
        }
      })
    }

    const change = function (e){
      let imgInput = document.getElementById('file')

      if (!imgInput.value){
        message.error('没有选择图片')
      }

      let file = imgInput.files[0];
      let size = file.size;
      if (size >= 1 * 1024 * 1024) {
        message.error('文件大小超出限制')
        return false;
      }
      if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {
        message.error('不是有效的图片')
        return;
      }
      let formData = new FormData()
      formData.append('file',file)

      axios.post('http://121.37.0.16:8080/api/file/upload',formData,{
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        if (res.data.code == 0){
          state.userAvatar = 'http://121.37.0.16:9000/public/'+ res.data.data.fileName[0]
          let myData = {
            id: state.userId,
            userAvatar: state.userAvatar,
          }
          updateUser(myData)
          store.commit("setUserAvatar",{value: state.userAvatar})
        }
      })

    }

    const updateAccount = function (){
      let data = {
        id: state.userId,
        userAccount: state.userAccount,
      }
      updateUser(data)

      store.commit("setUserAccount",{value: state.userAccount})
      state.isAccount = false
    }

    const updateName = function (){
      let data = {
        id: state.userId,
        userName: state.userName,
      }
      updateUser(data)

      store.commit("setUserName",{value: state.userName})
      state.isName = false
    }

    const updateGender = function (){
      let data = {
        id: state.userId,
        gender: state.gender,
      }
      updateUser(data)

      store.commit("setGender",{value: state.gender})
      state.isGender = false
    }

    const updatePhone = function (){
      let data = {
        id: state.userId,
        phone: state.userPhone,
      }
      updateUser(data)

      store.commit("setPhone",{value: state.userPhone})
      state.isPhone = false
    }

    //修改密码
    const updatePwd = function (){
      if (state.formStatePwd.newPwd != state.formStatePwd.affirmPwd){
        message.error('与输入的新密码不一致')
      }else{
        let data = {
          id: state.userId,
          userPassword: state.formStatePwd.newPwd,
        }
        updateUser(data)
      }

    }



    return{
      ...toRefs(state),
      change,
      updateAccount,
      updateName,
      updateGender,
      updatePhone,
      updatePwd,
    }
  }
}
</script>

<style scoped>
.settingContent{
  width: 96%;margin: 25px auto 0 auto;
  background-color: #FFFFFF;
  padding: 10px 15px;
}
.formItem{
  line-height: 40px;
  color: #555666;
  font-size: 15px;
}
.formContent{
  color: #222226;
}
.show_input_image {
  position: absolute;
  left: 20px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.input_image {
  position: relative;
  width: 70px;
  height: 70px;
  background-color: blue;
  z-index: 999;
  opacity: 0;
  border-radius: 50%;
}
</style>

<style>
/*.ant-upload.ant-upload-select-picture-card{*/
/*  width: 70px;*/
/*  height: 70px;*/
/*  border-radius: 50%;*/
/*}*/
/*.ant-upload.ant-upload-select-picture-card{*/
/*  opacity: 0.85;*/
/*}*/

.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>